<!-- src/views/user/IndexView.vue -->
<template>
  <div class="container">
    <header class="header">
      <van-nav-bar left-arrow @click-left="$router.back()">
        <template #title>
          <span class="title">个人中心</span>
        </template>
        <template #right>
          <router-link v-if="userFlag" to="/set"><van-icon name="setting-o" size="18" color="#333" /></router-link>
        </template>
      </van-nav-bar>
    </header>
    <main class="content">
      <div class="avatarBox">
        <van-image round width="0.8rem" height="0.8rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <a href="#" v-if="userFlag">
          <p>欢迎您:{{ username }}</p>
        </a>
        <router-link v-else to="/login">
          <p>请点击登录</p>
        </router-link>
      </div>
      <van-grid>
        <van-grid-item icon="refund-o" text="待付款" />
        <van-grid-item icon="shop-o" text="待收货" />
        <van-grid-item icon="thumb-circle-o" text="待评价" />
        <van-grid-item icon="orders-o" text="全部订单" />
      </van-grid>
      <van-cell title="地址管理" is-link />
      <van-cell title="我的收藏夹" is-link />
      <van-cell title="关于我们" is-link />
      <div class="logo">
        <van-image :src="logo"></van-image>
      </div>
    </main>
  </div>
</template>

<script lang="js">
import logo from '@/assets/logo.jpg'
import { getUserInfo } from '@/apis/user'
export default {
  data() {
    return {
      logo,
      userFlag: false,
      username: ''
    }
  },
  mounted() {
    if (localStorage.getItem('userid')) {
      // 用户登录
      this.userFlag = true
      getUserInfo({ userid: localStorage.getItem('userid') }).then(res => {
        console.log(res.data)
        this.username = res.data.data[0].username ? res.data.data[0].username : res.data.data[0].tel
      })
    } else {
      // 用户未登录
      this.userFlag = false
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.header {
  // box-sizing: border-box;
  border-bottom: 3px solid #666;

  .van-nav-bar {

    // background-color: #f66;
    .title {
      color: #333;
    }
  }
}

.avatarBox {
  width: 100%;
  height: 1rem;
  box-sizing: border-box;
  padding: 10px;
  background-color: rgb(246, 210, 210);
  display: flex;

  a {
    display: block;
    display: flex;
    align-items: center;
    margin-left: 20px;

    p {

      font-size: 16px;
      color: #333;
    }
  }

}

.logo {
  margin: 30px auto;
  display: flex;
  justify-content: center;
}
</style>